<div class="home-page">
  <div class="banner">
    <div class="container">
      <h1 class="logo-font">conduit</h1>
      <p>A place to share your knowledge.</p>
    </div>
  </div>

  <div class="container page">
    <div class="row">
      <div class="col-md-9">
        <div class="feed-toggle">
          @if ({ listConfig: $listConfig() }; as model) {
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <a [ngClass]="{ active: model.listConfig.type === 'FEED' }" class="nav-link" (click)="setListTo('FEED')"
                  >Your Feed</a
                >
              </li>
              <li class="nav-item">
                <a
                  data-testid="global-feed"
                  [ngClass]="{
                    active: model.listConfig.type === 'ALL' && !model.listConfig.filters.tag
                  }"
                  class="nav-link"
                  (click)="setListTo('ALL')"
                  >Global Feed</a
                >
              </li>
              <li class="nav-item" [hidden]="!model.listConfig.filters.tag">
                <a class="nav-link active">
                  <i class="ion-pound"></i>
                  {{ model.listConfig.filters.tag }}
                </a>
              </li>
            </ul>
          }
        </div>

        <cdt-article-list></cdt-article-list>
      </div>

      <div class="col-md-3">
        @defer (when !!$tags().length) {
          <div class="sidebar">
            <cdt-tags-list (setListTag)="setListTag($event)" [tags]="$tags()"></cdt-tags-list>
          </div>
        }
      </div>
    </div>
  </div>
</div>
